<!-- 资讯服务二级页面 -->
<template>
  <div class="consultation-secondary">

    <div class="breadcrumb">
      您当前的位置：
      <span @click="toSightseeingTour" style="color:#39ADFF; cursor:default">资讯服务</span>&nbsp; > &nbsp;
      <span>{{$route.query.title}}</span>
    </div>

<!-- 票务政策 -->
    <div v-if="this.$route.params.type === '3-1'" style="marginTop: 20px">
      <span-card
        :spanCardData="spanCardDataTicketing"
        @toSpanCardDetail="toSpanCardDetail">
      </span-card>
      <div class="pagination-con">
        <el-pagination
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="12"
          @current-change="hotelCurrentChange">
        </el-pagination>
      </div>
    </div>

<!-- 客服管理 -->
    <div v-if="this.$route.params.type === '3-2'" class="customer">
      <div class="titleImgBg">旅游客服中心</div>
      <div class="customer-all">
        <div class="customer-item" v-for="item in phoneData[0]" :key="item.id">
          <span>{{item.name}}</span>
          <span>{{item.phone}}</span>
        </div>
      </div>
    </div>

<!-- 温馨提示 -->
    <div v-if="this.$route.params.type === '3-3'" style="marginTop: 20px">
      <span-card @toSpanCardDetail="toSpanCardDetail" :spanCardData="spanCardDataTicketing"></span-card>
      <div class="pagination-con">
        <el-pagination
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="12"
          @current-change="hotelCurrentChange">
        </el-pagination>
      </div>
    </div>

<!-- 常用电话 -->
    <div v-if="this.$route.params.type === '3-4'" class="customer">
      <div class="titleImgBg">旅游常用电话</div>
      <div class="customer-all">
        <div class="customer-item" v-for="item in phoneData[1]" :key="item.id">
          <span style="width: 240px">{{item.name}}</span>
          <span>{{item.phone}}</span>
        </div>
      </div>
    </div>

<!-- 新闻资讯 -->
    <div v-if="this.$route.params.type === '3-5'" class="customer">
      <div class="sightseeing-tour-history">
      <keep-alive>
        <information-img-zoom
          :imgHeight="200"
          :imgWidth="263"
          :imgMarginTop="0"
          :imgMarginBottom="-64"
          :informationHeight="410"
          :informationData="weChatList"
          :btnMoreImgBg="serviceMoreBg"
          @clickinformation="toDetails">
        </information-img-zoom>
      </keep-alive>

    </div>

      <el-pagination
        layout="prev, pager, next"
        :page-size="20"
        :total="newsTotal"
        @current-change="newsCurrentChange">
      </el-pagination>
    </div>

<!-- 出租行 -->
    <div v-if="this.$route.params.type === '3-6'" style="marginTop: 20px">
      <span-card
        :spanCardData="spanCardDataLend"
        @toSpanCardDetail="toSpanCardDetail">
      </span-card>
      <div class="pagination-con">
        <el-pagination
          layout="prev, pager, next"
          :total="pageLendTotal"
          :page-size="12"
          @current-change="hotelCurrentChange">
        </el-pagination>
      </div>
    </div>

<!-- 旅行社 -->
    <div v-if="this.$route.params.type === '3-7'" style="marginTop: 20px">
      <span-card
        :spanCardData="spanCardDataLend"
        @toSpanCardDetail="toSpanCardDetail">
      </span-card>
      <div class="pagination-con">
        <el-pagination
          layout="prev, pager, next"
          :total="pageLendTotal"
          :page-size="12"
          @current-change="hotelCurrentChange">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import spanCard from '_c/spanCard/span_card'
import Tab from '_c/tab/tab'
import zixunTelBg from '_as/zixun-tel.jpg'

// json数据
import phoneData from './phoneData'

import InformationImgZoom from '_c/informationImgZoom/information_img_zoom'
import serviceMoreBg from '_as/service-more.png'

import scrollAnimation from '@/api/scrollAnimation.js'

// import axios from 'axios'
export default {
  data () {
    return {
      zixunTelBg,
      phoneData,
      pageTotal: null,
      pageLendTotal: null,
      pageNum: 1,
      pageNumLend: 1,
      spanCardDataTicketing: [],
      spanCardDataLend: [],
      spanCardDataPrompt: [],
      tabs: [
        {
          tabIndex: '0',
          tabTitle: '习水旅游概况'
        },
        {
          tabIndex: '1',
          tabTitle: '习水地形'
        },
        {
          tabIndex: '2',
          tabTitle: '习水气候'
        }
      ],
      weChatList: [],
      newsTotal: null,
      serviceMoreBg,
      newsPageNum: 0
    }
  },
  components: {
    spanCard,
    Tab,
    InformationImgZoom
  },
  computed: {},
  created () {
    this.weChatContent(0)
  },
  mounted () {
    this.initTabPostion()
  },
  watch: {
    $route (to, from) {
      switch (to.params.type) {
        case '3-1':
          this._getSpanCardDataTicketing(0)
          break
        case '3-3':
          this._getSpanCardDataTicketing(1)
          break
        case '3-6':
          this._getSpanCardDataLend(1)
          break
        case '3-7':
          this._getSpanCardDataLend(0)
          break
        default:
          this.toTop()
          break
      }
    }
  },
  methods: {
    toSpanCardDetail (item) {
      this.$router.push({
        path: '/consultation_detail',
        query: {
          item: item
        }
      })
    },
    initTabPostion () {
      switch (this.$route.params.type) {
        case '3-1':
          this._getSpanCardDataTicketing(0)
          break
        case '3-3':
          this._getSpanCardDataTicketing(1)
          break
        case '3-6':
          this._getSpanCardDataLend(1)
          break
        case '3-7':
          this._getSpanCardDataLend(0)
          break
        default:
          break
      }
    },
    _getSpanCardDataTicketing (type, pageNum) {
      this.$http.get('/v2/reminderList', {
        type: type,
        pageNum: pageNum,
        pageSize: 12
      }).then(res => {
        this.pageTotal = res.total
        const empt = []
        res.data.forEach(item => {
          empt.push({
            id: item.id,
            title: item.title,
            content: item.intro,
            abstracts: item.abstracts,
            previous: item.previous,
            next: item.next,
            previousTitle: item.previousTitle,
            nextTitle: item.nextTitle,
            contentId: item.contentId
          })
        })
        this.spanCardDataTicketing = empt
        this.toTop()
      })
    },
    // 获取‘出租行’，‘旅行社’列表数据
    _getSpanCardDataLend (type, pageNumLend) {
      // type 0 旅行社 1 租车行
      this.$http.get('/v2/travelAgency', {
        type: type,
        pageSize: 12,
        pageNum: pageNumLend
      }).then(res => {
        this.pageLendTotal = res.total
        const empt = []
        res.data.forEach(item => {
          empt.push({
            id: item.id,
            title: item.title,
            content: item.intro,
            contentId: item.contentId,
            phone: item.phone
          })
        })
        this.spanCardDataLend = empt
      })
    },
    toTop () {
      let needSCrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scroll || 0
      scrollAnimation(needSCrollTop, 0)
    },
    toSightseeingTour () {
      this.$router.go(-1)
    },
    hotelCurrentChange (val) {
      switch (this.$route.params.type) {
        case '3-1':
          this._getSpanCardDataTicketing(0, val)
          break
        case '3-3':
          this._getSpanCardDataTicketing(1, val)
          break
        case '3-6':
          this._getSpanCardDataLend(1, val)
          break
        case '3-7':
          this._getSpanCardDataLend(0, val)
          break
        default:
          break
      }
    },
    weChatContent (newsPageNum) {
      this.$http.post('/v1/getMaterialList', {
        type: 'news',
        offset: newsPageNum,
        count: 20
      }).then(res => {
        const empt = []
        res.item.forEach(item => {
          empt.push({
            'id': item.media_id,
            'informationImgZoom': item.content.news_item[0].thumb_url,
            'title': item.content.news_item[0].title,
            'thumb_media_id': item.content.news_item[0].thumb_media_id,
            'content': item.content.news_item[0].digest,
            'informationBgImg': ''
          })
        })
        this.weChatList = empt
        this.newsTotal = res.total_count
      })
    },
    newsCurrentChange (val) {
      this.weChatContent((val - 1) * 20)
    },
    toDetails (item) {
      this.$router.push({
        path: '/consultation_detail_weChatNews',
        query: {
          id: item.id,
          title: item.title
        }
      })
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.consultation-secondary {
  width 100%
}
.pagination-con {
  margin 20px 0
}

.customer {
  margin 15px auto
  width 1200px
}
.titleImgBg {
  background url('../../../assets/img/zixun-tel.jpg')
  width 1200px
  height 70px
  line-height 70px
  color #fff
  font-size 30px
}
.customer-all {
  display flex
  flex-wrap wrap
}
.customer-item {
  height 40px
  width 399px
  display flex
  align-items center
  border-bottom 1px solid #ddd
  border-right 1px solid #ddd
  span:nth-child(2n-1) {
    background #F1F7FF
    width 250px
    height 40px
    line-height 40px
  }
}

.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}

.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}

.sightseeing-tour-history {
  width 100%
  position relative
  margin-top 20px
  img {
    margin 30px 0 20px
  }
  .sightseeing-con {
    min-height 490px
    display flex
    justify-content center
    padding-bottom 80px
    // align-items center
    .sightseeing-con-right {
      width 620px
      height 500px
      display flex
      flex-wrap wrap
    }
  }
  .btn {
    position absolute
    left 43%
    bottom 105px
    margin 0px auto
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      position absolute
      top 51px
      left 46px
      color #999
      width 100px
      padding 5px 10px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
  .historyBtn {
    position absolute
    left 43%
    bottom 0px
    margin 0px auto 15px
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      position absolute
      top 0px
      left 46px
      color #999
      width 100px
      padding 5px 10px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
}
</style>
